<template>
	<view>
		<view class="team-t">
			<view class="teamSearch">
				<view class="seachInp">
					<image class="InpImg" src="../../static/images/activity/ss@2x.png" mode=""></image>
					<input class="Inp" type="text" value="" placeholder="请输入团队名称" v-model="name" />
				</view>
				<view class="seachBtn" @tap="search()">
					搜索
				</view>
			</view>
		</view>
		<view class="teamlist">
			<scroll-view lower-threshold="500" @scrolltolower='nextPage()' scroll-y="true"
				:style="{height:teamHeight+'px'}">
				<view class="allteam_title" v-if="Myteam.length>0">
					我创建的团队
				</view>
				<view class="teamScroll">
					<view class="teamlist_item box d-jc-sb d-ai-c" @tap="teamInfo(item.id,item.type)" v-for="(item,index) in Myteam" :key="index">
							<image class="listImg" :src="item.logo" mode=""></image>
							<view class="teamlist_left">
								<view class="">
									{{item.name}}
								</view>
								<view class="">
									团长：{{item.userName}}
								</view>
								<view class="box d-jc-sb d-ai-c teamInfo">
									<view class="">
										电话：{{item.phone}}
									</view>
									<view class="" v-if="item.type==1">
										文艺团队
									</view>
									<view class="" v-if="item.type==2">
										志愿者小组
									</view>
								</view>
							</view>
					</view>
				</view>
				<view class="allteam_title" v-if="teamlist.length>0">
					全部团队
				</view>
				<view class="teamScroll">
					<view class="teamlist_item box d-jc-sb d-ai-c" @tap="teamInfo(item.id,item.type)" v-for="(item,index) in teamlist" :key="index">
							<image class="listImg" :src="item.logo" mode=""></image>
							<view class="teamlist_left">
								<view class="">
									{{item.name}}
								</view>
								<view class="">
									团长：{{item.userName}}
								</view>
								<view class="box d-jc-sb d-ai-c teamInfo">
									<view class="">
										电话：{{item.phone}}
									</view>
									<view class="">
										{{item.applyNumber}}人已报名
									</view>
								</view>
							</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teamHeight: '',
				name:'',
				teamlist:'',
				pageNum:1,
				pageSize:10,
				hasNextPage:true,
				Myteam:'',
				type:''
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.teamHeight = res.windowHeight - uni.upx2px(150) //windoHeight为窗口高度，主要使用的是这个
				}
			})

		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/teamcenter/createTeam',
				animationDuration: 350
			})
		},
		onLoad(option){
			this.type = option.type
			this.unitylistall()
			this.mycreateTeam()
		},
		methods: {
			//搜索团队
			search(){
				this.teamlist = ''
				this.pageNum = 1
				this.unitylistall()
				this.mycreateTeam()
			},
			//获取我创建的团队列表
			mycreateTeam(){
				this.$api.mycreateTeam({
					type:'',
					name:this.name
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.Myteam = res.data.dataMap
						for(var i = 0;i<this.Myteam.length;i++){
							if(this.Myteam[i].practicalNumber==null){
								this.Myteam[i].practicalNumber = 0
						}
						}
					}
				})
			},
			//获取全部团队列表
			unitylistall(){
				console.log("====出发底部===" + this.pageNum)
				this.$api.unitylistall({
					name: this.name,
					type: this.type
					},this.pageNum, this.pageSize).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.teamlist = res.data.dataMap.list
						for(var i = 0;i<this.teamlist.length;i++){
							if(this.teamlist[i].practicalNumber==null){
								this.teamlist[i].practicalNumber = 0
							}
						}
						this.hasNextPage = res.data.dataMap.hasNextPage
					}
				})
			},
			nextPage() {
				let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.unitylistall({
						name: this.name,
						type: this.type
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								this.teamlist.push(res.data.dataMap.list[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
						}
						for(var i = 0;i<this.teamlist.length;i++){
							if(this.teamlist[i].practicalNumber==null){
								this.teamlist[i].practicalNumber = 0
							}
						}
					})
				} else {


				}

			},
			//跳转详情
			teamInfo(id,type){
				uni.navigateTo({
					animationDuration:300,
					url:'./teamInfo?id='+id+'&type='+type
				})
			}

		}
	}
</script>

<style scoped>
	.allteam_title{
			width: 690rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}
	.team-t {
		width: 750rpx;
		height: 140rpx;
		background-color: #f8f8f8;
	}

	.teamSearch {
		width: 690rpx;
		height: 140rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.seachInp {
		width: 550rpx;
		height: 68rpx;
		background: #FFFFFF;
		border: 3rpx solid #FF5551;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
	}

	.seachBtn {
		width: 120rpx;
		height: 71rpx;
		background: #FF5551;
		border-radius: 34rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 68rpx;
	}

	.InpImg {
		width: 36rpx;
		height: 36rpx;
		margin-left: 30rpx
	}

	.Inp {
		width: 450rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 45rpx;
		margin-left: 10rpx
	}

	.teamlist {
		width: 750rpx;
		background: #F8F8F8;
	}
	.teamScroll{
		overflow: hidden;
	}
	.teamlist_item {
		width: 630rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding: 0 30rpx 0 30rpx;
	}

	.listImg {
		width: 180rpx;
		height: 120rpx;
		background: #EEEEEE;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
	}

	.teamlist_left {
		width: 425rpx;
		height: 120rpx;
		margin-top: -20rpx;
	}

	.teamlist_left>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.teamlist_left>view:nth-child(2) {
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
	}

	.teamInfo>view:nth-child(1) {
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
	}
	.teamInfo>view:nth-child(2) {
		font-size: 22rpx;
		font-weight: bold;
		color: #FF7E51;
	}
	.logo {
		width: 150rpx;
		height: 150rpx;
		margin: 20rpx 10rpx 40rpx 10rpx;
		border-radius: 20rpx;
	}
</style>
